<template>
  <div class="left-top">
    <div class="left-top-title">
      <title-top :name="name" />
    </div>
    <div class="left-top-content">
      <div
        class="left-top-content-list"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="left-top-content-list-item">
          <div class="name">广东省</div>
          <div class="num">
            未完成 <span>{{ item.incomplete }}</span> / 总数
            <span>{{ item.num }}</span>
          </div>
        </div>
        <div :class="index == 0 ? 'xian' : 'xian2'">
          <div class="xian-item" :style="{ width: item.width + '%' }">
            <div class="quan">
              <div class="dian"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import titleTop from "../../title/title.vue";
export default {
  name: "leftTop",
  components: {
    titleTop,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    name: {
      type: String,
      default: () => "标题",
    },
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  mounted() {},
  methods: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.left-top {
  height: 100% !important;
  .left-top-title {
    height: 40px;
  }
  .left-top-content {
    height: calc(100% - 40px);
    overflow-y: auto;
    .left-top-content-list {
      .left-top-content-list-item {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #05d2fa;
        }
        .num {
          font-family: PingFang SC, PingFang SC;
          font-size: 12px;
          color: #738a99;
          span {
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #05d2fa;
          }
        }
      }
      .xian {
        height: 6px;
        background: #29303c;
        margin-top: 4px;
        .xian-item {
          position: relative;
          width: 80%;
          height: 6px;
          background: linear-gradient(90deg, #10274b 0%, #05d2fa 100%);
          border-radius: 0px 3px 3px 0px;
          transition: all 0.5s;
          .quan {
            position: absolute;
            right: -5px;
            top: -4px;
            width: 12px;
            height: 12px;
            box-shadow: 0px 0px 4px 0px #07c6ed;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            .dian {
              width: 6px;
              height: 6px;
              background: #ffffff;
              border-radius: 50%;
            }
          }
        }
      }
      .xian2 {
        height: 6px;
        background: #29303c;
        margin-top: 4px;
        .xian-item {
          position: relative;
          width: 80%;
          height: 6px;
          background: linear-gradient(90deg, #10274b 0%, #1978e5 100%);
          border-radius: 0px 3px 3px 0px;
          transition: all 0.5s;
        }
      }
    }
  }
}
</style>
